import React, { Component } from 'react'
import { StatusBar, DeviceEventEmitter, Alert, TextInput, ActivityIndicator, Image, View, ScrollView, Text, KeyboardAvoidingView } from 'react-native'
import { Rating } from 'react-native-elements'
import { Button } from '../Components'
import { connect } from 'react-redux'
import OrderDetailActions from '../Redux/OrderDetailRedux'
import AppConfig from '../Config/AppConfig'
const domain = AppConfig.domain

// Styles
import styles from './Styles/EvaluationScreenStyle'

class EvaluationScreen extends Component {
  static navigationOptions = {
    title: '评价'
  }
  constructor(props) {
    super(props)
    const { state } = this.props.navigation
    this.state = {
      id: state.params.id,
      rating: 5,
      content: null,
    }
  }
  componentDidMount() {
    this.props.getOrder(this.state.id, this.props.token)
  }
  ratingCompleted = (rating) => {
    this.setState({rating:rating})
  }
  onPress = () => {
    if (!this.state.content) {
      Alert.alert('请写下您对师傅的评价')
      return
    }
    let url = domain + '/api/order/comment'
    return fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'token': this.props.token
      },
      body: JSON.stringify({
        aid: this.props.order.payload.artificer.id,
        order_id: this.state.id,
        content: this.state.content,
        star: this.state.rating
      })
    }).then((response) => response.json())
      .then((responseJson) => {
        if(responseJson.code == 1) {
          //Alert.alert('评价成功')
          DeviceEventEmitter.emit('refreshOrderList', {})
          DeviceEventEmitter.emit('refreshOrderDetail', {})
          //setTimeout(()=>, 2000)
          this.props.navigation.goBack()
        } else {
          Alert.alert('评价失败')
        }
      }).catch((error) => {
        Alert.alert('评价失败')
      })
  }
  render () {
    if (this.props.order.fetching) {
      return <ActivityIndicator />
    } else if (!this.props.order.payload) {
      return null
    }
    const order = this.props.order.payload
    return (
      <ScrollView style={styles.container}>
        <StatusBar translucent={false} barStyle='dark-content' backgroundColor='white' />
        <KeyboardAvoidingView behavior='position'>
          <View style={{flexDirection:'row',alignItems:'center',padding:10,backgroundColor:'white',marginHorizontal:10,marginBottom:1}}>
            <Image style={{width:46,height:46,borderRadius:23,marginRight:10}}
              source={{uri:order.artificer.img}} />
            <Text style={{color:'rgba(0,0,0,0.87)',fontSize:16}}>
              {order.artificer.name}</Text>
          </View>
          <View style={{padding:10,marginHorizontal:10,backgroundColor:'white'}}>
            <Rating imageSize={32}
              startingValue={5}
              onFinishRating={this.ratingCompleted}
              style={{alignSelf:'center',marginBottom:10}} />
            <TextInput multiline
              style={{backgroundColor:'rgba(0,0,0,0.06)',borderWidth:1,borderColor:'rgba(0,0,0,0.12)',height:120}}
              placeholder='请写下对师傅的评价'
              onChangeText={(value)=>this.setState({content:value})}
              underlineColorAndroid='transparent'/>
          </View>
          <View style={{marginTop:10,padding:10}}>
            <Button title='提交' onPress={this.onPress} />
          </View>
        </KeyboardAvoidingView>
      </ScrollView>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.user.payload.token,
    order: state.orderDetail
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getOrder:(id,token) => dispatch(OrderDetailActions.orderDetailRequest(id,token)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(EvaluationScreen)
